<template>
	<view class="container">
		<!-- 分隔线 -->
		<view class="line"></view>

		<!-- 上一周/下一周切换 -->
		<view class="row">
			<view class="row" @click="lastWeek">
				<text class="iconfont icon-sanjiaoleft" style="padding: 15rpx; color: #999999"></text>
				<view style="font-size: 28rpx; color: #999999">上一周</view>
			</view>
			<view class="timeType">{{ timeBean.yearMonth }}</view>
			<view class="row" @click="nextWeek">
				<view style="font-size: 28rpx; color: #999999">下一周</view>
				<text class="iconfont icon-sanjiaoright" style="padding: 15rpx; color: #999999"></text>
			</view>
		</view>

		<!-- 周日期选择 -->
		<view class="row">
			<view v-for="(item, index) in timeBean.weekDayList" :key="index"
				:class="['column', index === timeBean.selectDay ? 'select-column' : '']" @click="itemClick(index)">
				<view class="weekType">{{ item.week }}</view>
				<view class="dateType">{{ item.day }}</view>
				<text class="iconfont icon-mifan" style="color: #fff"></text>
			</view>
		</view>

		<!-- 分隔线阴影 -->
		<view class="line-shadow"></view>

		<!-- 悬浮按钮 -->
		<view class="suspension" @click="addMenuClick">
			<text class="iconfont icon-tianjia" style="font-size: 60rpx; color: #fff"></text>
		</view>
	</view>
</template>

<script setup>
import {
	defineEmits
} from 'vue'

	const props = defineProps({
		timeBean: {
			type: Object,
			default: () => ({}),
		},
	})
	// console.log()
	
	const emit =  defineEmits(['lastWeek', 'nextWeek', 'dayClick', 'addMenuClick']) // 定义组件的事件
	// 上一周
	const lastWeek = () => {
		emit('lastWeek');
	};

	// 下一周
	const nextWeek = () => {
		emit('nextWeek');
	};

	// 点击某一天
	const itemClick = (index) => {
		// var index = e.currentTarget.dataset.index
		// this.triggerEvent("dayClick", index);
		emit('dayClick', index);
	};

	// 点击悬浮按钮
	const addMenuClick = () => {
		emit('addMenuClick');
	};
</script>

<style lang="scss" scoped>
	.container {

		.row {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			background: #fff;

			.column {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 5rpx;
				padding-top: 5rpx;
				margin-top: 10rpx;
				flex: 1;
			}

			.select-column {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 5rpx;
				padding-top: 5rpx;
				margin-left: 5rpx;
				margin-right: 5rpx;
				margin-top: 10rpx;
				flex: 1;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background: #36d6a6;
			}
		}
	}


	.timeType {
		font-size: 35rpx;
		font-weight: bold;
	}

	.dateType {
		font-size: 35rpx;
		font-weight: bold;
	}

	.weekType {
		font-size: 28rpx;
		color: darkgrey;
	}

	.line {
		height: 1rpx;
		width: 100%;
		background-color: gainsboro;
	}

	.line-shadow {
		height: 3rpx;
		width: 100%;
		background-color: gainsboro;
		box-shadow: 5px 0px 5px 0px gainsboro;
	}

	@font-face {
		font-family: "iconfont";
		src: url('iconfont.eot?t=1533031583450');
		/* IE9*/
		src: url('iconfont.eot?t=1533031583450#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
			url('iconfont.ttf?t=1533031583450') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			url('iconfont.svg?t=1533031583450#iconfont') format('svg');
		/* iOS 4.1- */
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/**
*字体图标，左右箭头，书，米饭，可以修改界面对图标进行修改替换
*/
	.icon-sanjiaoleft:before {
		content: "\e6b6";
	}

	.icon-sanjiaoright:before {
		content: "\e6b7";
	}

	.icon-book1:before {
		content: "\e631";
	}

	.icon-mifan:before {
		content: "\e606";
	}
</style>